<template>
  <div>
    <div class="mb">
      <el-button type="primary" plain @click="drawer = true">添加</el-button>
    </div>
    <el-card v-for="(o, k) in list" :key="k" class="mb">
      <div slot="header" class="clearfix">
        <h4 style="float: left;">{{o.title}}</h4>
        <el-button
          style="float: right; padding: 3px 6px"
          type="text"
          @click="submitData(o.id)"
          v-if="o.role!='admin'"
        >保存</el-button>
        <el-button
          style="float: right; padding: 3px 6px"
          type="text"
          @click="removedata(o.id)"
          v-if="o.role!='admin'"
        >删除</el-button>
      </div>
      <el-checkbox-group v-model="checkbox[o.id]" v-if="o.role=='admin'">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column v-for="(item,i) in routers" :key="i" :label="item.title">
            <el-checkbox
              v-for="(items,index) in item.children"
              :key="index"
              :label="items.meta.title"
              disabled
            ></el-checkbox>
          </el-table-column>
        </el-table>
      </el-checkbox-group>
      <el-checkbox-group v-model="checkbox[o.id]" v-else>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column v-for="(item,i) in routers" :key="i" :label="item.title">
            <el-checkbox
              v-for="(items,index) in item.children"
              :key="index"
              :label="items.meta.title"
            ></el-checkbox>
          </el-table-column>
        </el-table>
      </el-checkbox-group>
    </el-card>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <el-form ref="form" class="form drawer" :model="form" label-width="80px">
        <el-form-item label="中文名">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="英文名">
          <el-input v-model="form.role" />
        </el-form-item>
        <el-form-item>
          <el-button @click="drawer = false">取消</el-button>
          <el-button type="primary" @click="submitAddData(form)">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      drawer: false,
      form: {},
      tableData: [{}],
      checkbox: {}
    };
  },
  methods: {
    ...mapActions("permissions", [
      "getlist",
      "upData",
      "addData",
      "remove",
      "validation"
    ]),
    async submitData(id) {
      let { success } = await this.upData({
        id,
        items: JSON.stringify(this.checkbox[id])
      });
      if (success)
        return this.$message({
          type: "success",
          message: "保存成功!"
        });
    },
    async submitAddData(form) {
      let res = await this.validation(form.role);
      if (res.data)
        return this.$message({
          type: "info",
          message: "角色已存在"
        });
      let { success } = await this.addData(form);
      this.drawer = false;
      this.form = {};
      if (success) {
        this.getlist();
        return this.$message({
          type: "success",
          message: "添加完成!"
        });
      }
    },
    removedata(id) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let { success } = await this.remove({ id });
          if (success) {
            this.getlist();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {
    this.getlist();
  },
  computed: {
    // ...mapState('permissions', ['list']),
    list() {
      let obj = {};
      this.$store.state.permissions.list.forEach(item => {
        obj[item.id] = item.items ? JSON.parse(item.items) : [];
      });
      this.checkbox = { ...obj };
      return this.$store.state.permissions.list;
    },
    ...mapState("login", ["routers"])
  }
};
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  display: flex;
  justify-content: space-between;
}

.mb {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
h4 {
  margin: 0;
  padding: 0;
}
.drawer {
  padding: 30px 20px 0 0;
}
</style>
